<template>
  <div class="login-container">
    <van-nav-bar title="登录" fixed placeholder />

    <van-form @submit="handleLogin">
      <!-- 手机号输入框 -->
      <van-field
          v-model.trim="phone"
          type="tel"
          label="手机号"
          placeholder="请输入手机号"
          maxlength="11"
          :rules="phoneRules"
          clearable
      />

      <!-- 验证码输入框 -->
      <van-field
          v-model.trim="code"
          type="digit"
          label="验证码"
          placeholder="请输入验证码"
          maxlength="6"
          :rules="codeRules"
          clearable
      >
        <template #button>
          <van-button
              size="small"
              :type="canSend ? 'primary' : 'default'"
              :disabled="!canSend"
              @click="sendCode"
          >
            {{ countDown > 0 ? `${countDown}秒后重发` : '获取验证码' }}
          </van-button>
        </template>
      </van-field>

      <!-- 协议勾选框 -->
      <van-cell center>
        <van-checkbox v-model="agreeProtocol" shape="square" />
        <span class="protocol-text">我已阅读并同意</span>
        <a href="/protocol" class="protocol-link">《用户服务协议》</a>
      </van-cell>

      <!-- 登录按钮 -->
      <div class="login-btn-wrapper">
        <van-button
            round
            block
            type="primary"
            native-type="submit"
            :disabled="!canLogin"
        >
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref, computed, onBeforeUnmount } from 'vue'
import {
  NavBar,
  Form,
  Field,
  Button,
  Checkbox,
  Cell,
  showToast
} from 'vant'

// 响应式数据
const phone = ref('')
const code = ref('')
const agreeProtocol = ref(false)
const countDown = ref(0)
const timer = ref(null)

// 表单验证规则
const phoneRules = [
  { required: true, message: '请填写手机号' },
  { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
]
const codeRules = [
  { required: true, message: '请填写验证码' },
  { pattern: /^\d{6}$/, message: '验证码为6位数字' }
]

// 计算属性
const canSend = computed(() =>
    /^1[3-9]\d{9}$/.test(phone.value) && countDown.value === 0
)

const canLogin = computed(() => {
  return (
      /^1[3-9]\d{9}$/.test(phone.value) &&
      /^\d{6}$/.test(code.value) &&
      agreeProtocol.value
  )
})

// 发送验证码
const sendCode = () => {
  if (!canSend.value) return

  // 模拟发送验证码
  showToast('验证码已发送')
  countDown.value = 60
  timer.value = setInterval(() => {
    countDown.value <= 0 ? clearInterval(timer.value) : countDown.value--
  }, 1000)
}

// 登录逻辑
const handleLogin = async () => {
  // 空值检查
  if (!phone.value.trim() || !code.value.trim()) {
    showToast('请输入手机号和验证码')
    return
  }
  // 协议检查
  if (!agreeProtocol.value) {
    showToast('请同意用户协议')
    return
  }
  try {
    // 模拟登录请求
    showToast('登录成功')
    phone.value = ''
    code.value = ''
    agreeProtocol.value = false
  } catch (err) {
    showToast('登录失败')
  }
}

// 清理定时器
onBeforeUnmount(() => timer.value && clearInterval(timer.value))
</script>



<style lang='less' scoped>
.protocol-text {
  margin-left: 8px;
  font-size: 14px;
  color: #666;
}

.protocol-link {
  color: #1989fa;
  text-decoration: none;
}

.login-btn-wrapper {
  margin-top: 20px;
}
.login-container{
  /*
    v === view  视口  浏览器画布
    vh vw  vmax vmin
  */
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f8f8f9 0%, #f7f8f8 100%);

  .login-box {
    width: 400px;
    //height: 200px;
    padding: 40px;
    background:  rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);

    .title {
      text-align: center;
      margin-bottom: 30px;
      color: #303133;
      font-size: 24px;
    }

    .login-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15px 0;

      .login-others{
        display: flex;
        align-items: center;
        gap: 10px;
      }
    }

    .login-btn{
      width: 100%;
      margin-top: 48px;
    }
  }
}

</style>